import React, {Component, useState, useEffect} from 'react';
import {Form, Input, InputNumber, Button, Breadcrumb} from 'antd';

const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 16,
  },
};
const validateMessages = {
  required: '${label} is required!',
  types: {
    email: '${label} is not validate email!',
    number: '${label} is not a validate number!',
  },
  number: {
    range: '${label} must be between ${min} and ${max}',
  },
};

function UserInfoEdit(props) {

  const [editFrom, seteditFrom] = useState({
    user: '',
    website: '',
    email: '',
    age: 18,
    introduction: '',
  });
  const [form] = Form.useForm();
  useEffect(() => {
    console.log('改变');
    //模拟获取数据

  },[]);
  //表单改变
  const updateField = e => {
    console.log(e.target.value);
    seteditFrom({
      ...editFrom,
      [e.target.name]: e.target.value
    });
  };
  //提交保存
  const onFinish = values => {
    console.log(values);
  };
  const onFill = () => {
    form.setFieldsValue({
      user: '测试',
      website: '测试自动填充',
    });
  };

  return (
      <div>
        <Breadcrumb style={{margin: '16px 0'}}>
          <Breadcrumb.Item>主页</Breadcrumb.Item>
          <Breadcrumb.Item>用户管理</Breadcrumb.Item>
          <Breadcrumb.Item>用户添加</Breadcrumb.Item>
        </Breadcrumb>
        <Form  {...layout} name="nest-messages"
               initialValues={{
                 user: '',
                 website: editFrom.website,
                 email: editFrom.email,
                 age: editFrom.age,
                 introduction: editFrom.introduction
               }}
               onFinish={onFinish} validateMessages={validateMessages}
               form={form}>
          <Form.Item
              name='user'
              label="Name"
              rules={[
                {
                  required: true,
                },
              ]}
          >
            <Input placeholder="请输入用户名"
                   onChange={ updateField }/>
          </Form.Item>
          <Form.Item
              name='email'
              label="Email"
              rules={[
                {
                  type: 'email',
                },
              ]}
          >
            <Input/>
          </Form.Item>
          <Form.Item
              name='age'
              label="Age"
              rules={[
                {
                  type: 'number',
                  min: 0,
                  max: 99,
                },
              ]}
          >
            <InputNumber />
          </Form.Item>
          <Form.Item name='website' label="Website">
            <Input   onChange={ updateField }/>
          </Form.Item>
          <Form.Item name='introduction' label="Introduction">
            <Input.TextArea/>
          </Form.Item>
          <Form.Item wrapperCol={{...layout.wrapperCol, offset: 8}}>
            <Button type="primary" htmlType="submit">
              保存
            </Button>
            <Button type="link" htmlType="button" onClick={onFill}>
              Fill form
            </Button>
          </Form.Item>
        </Form>
      </div>

  );

}

export default UserInfoEdit;
